<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/normal.css">

	<script src="js/jquery.min.js"></script>
	<script src="js/jquery-ui.min.js"></script>
	<script src="js/echarts.min.js"></script>
	<script src="js/vue.js"></script>
	<script src="https://unpkg.com/vue-easytable/umd/js/index.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="js/md5.js"></script>
	<script src="js/rd.js"></script>
	<script src="js/chart-options.js"></script>
	<script src="js/fn.js"></script>

</head>
<style>
	.container {width: 80%; margin: 30px auto 80px auto; }
	.line { width: 100%; display: flex; justify-content: flex-start; align-items: center; }
	.chart { width: 100%; height: 300px; }
</style>
<body>
	<div class="container" id="vm">

		<div class="line"></div>

		<div class=""></div>
		<div class="chart" id="payfeeChart"></div>
		<hr>
		<div class="chart" id="usersChart"></div>

		<div class=""></div>
		<!-- <v-table ></v-table> -->

		<div class="line"></div>
		<div class="line"></div>

	</div>
</body>
</html>

<script>

	var dataDomain = "http://101.200.201.27/adm/kkdata/kap/";
	var vm = new Vue({
		el: "#vm",
		data: {
			payFee: [],
			users: [],
		},
		computed: {

		},
		methods: {
			getPayFee: function(){
				axios.get(dataDomain + "iv.php", {params: {do: "pay_fee"}}).then(function(r){
					console.log(r.data);
					vm.payFee = r.data;
					vm.showPayfeeCharts();
				}).catch(function(e){
					console.log(e);
				})
			},
			getUsers: function(){
				axios.get(dataDomain + "iv.php", {params: {do: "users"}}).then(function(r){
					console.log(r.data);
					vm.users = r.data;
					vm.showUsersCharts();
				}).catch(function(e){
					console.log(e);
				})
			},
			showPayfeeCharts: function(){
				let payfeeChart = echarts.init(document.getElementById("payfeeChart"));
				let opt = rd.chart_option.createNew();
				opt.add_series([{name: '收入', type: 'bar'}, {name: '执行收入', type: 'bar'}, {name: '执行率', type: 'line'}]);
				opt.set_xAxis_datas(this.payFee, ["targetName"]);
				for(let i in this.payFee){
					let x = this.payFee[i];
					opt.option.series[0].data.push(Number(x.pay_fee).toFixed(2));
					opt.option.series[1].data.push(Number(x.r_fee).toFixed(2));
					opt.option.series[2].data.push((Number(x.r_fee) / Number(x.pay_fee) * 100).toFixed(2));
				}
				opt.option.series[2].yAxisIndex = 1;
				opt.option.yAxis[1].max = 100;
				payfeeChart.setOption(opt.option);
			},
			showUsersCharts: function(){
				let usersChart = echarts.init(document.getElementById("usersChart"));
				let opt = rd.chart_option.createNew();
				opt.add_series([{name: '体验课会员', type: 'bar'}, {name: '正式课会员', type: 'bar'}, {name: '正式课会员占比', type: 'line'}]);
				opt.set_xAxis_datas(this.users, ["targetName"]);
				for(let i in this.users){
					let x = this.users[i];
					opt.option.series[0].data.push(Number(x.ty_user).toFixed(0));
					opt.option.series[1].data.push(Number(x.zk_user).toFixed(0));
					opt.option.series[2].data.push((Number(x.zk_user) / Number(x.users) * 100).toFixed(2));
				}
				opt.option.series[2].yAxisIndex = 1;
				opt.option.yAxis[1].max = 100;
				opt.option.series[0].stack = opt.option.series[1].stack = "a";
				usersChart.setOption(opt.option);
			}
		},
		watch: {

		},
		mounted(){
			this.getPayFee();
			this.getUsers();
		}
	})
</script>